<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="zh-tw">
<head>
<meta charset="UTF-8">
<title>${resource.title}</title>
<!-- favicon -->
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">
<link rel="Bookmark" href="images/favicon.ico" type="image/x-icon"/>
<!-- reset.css -->
<link rel="stylesheet" href="css/reset.css" media="screen">
<!-- Skeleton grid system -->
<link rel="stylesheet" href="css/skeleton.css" media="screen">
<!-- css -->
<link rel="stylesheet" href="css/style.css" media="screen">
<!-- rwdmenu -->
<link type="text/css" rel="stylesheet" href="css/jquery.mmenu.css" />
<!-- Layout and Media queries-->
<link rel="stylesheet" href="css/layout.css" media="screen">

<!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

<!-- Mobile Specific Meta -->
<meta name="viewport"
	content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0">
</head>
<body  class="membernav">
	<div id="page">
		<div class="header FixedTop addPageHeader">
			<a href="#menu" class="headericon"></a>
			<a href="memberResource?id=${loginMember.memberNO}" class="titleLink">會員上傳中心 - ${resource.title}</a>
		</div><!-- header -->
		<div class="content clearfix">
		<!--開始!!!!!我們的網頁內容~從header導覽列開始都貼進來，以下是courseList會貼的div示意一下-->
			<div class="addPageLink">
				<div class="container">
					
				</div>
			</div>				
			<div class="addPage">
				<div class="container">
				<!-- <div class="prefix_1 suffix_1"> -->
					<form id="sendForm" method="post" action="modiResource" enctype="multipart/form-data">
						<input type="hidden" name="id" value="${resource.id}">
						<input type="hidden" id="cid1" name="categoryID" value="${resource.categoryID}">
						<div class="grid_3">
							<label><strong>封面圖片:<span id="msg1"></span></strong></label>
							<div class="uploadimgArea">
								<input type="file" name="image" id="image" class="uploadimgfile" value="上傳圖片">
								<div class="uploadimgs">
									<img src="images/uploadimg.png" alt="上傳圖片鈕" id="uploadimg" class="uploadimg" style="display:none;">
									<img src="images/reuploadimg.png" alt="重傳圖片鈕" id="reuploadimg" class="reuploadimg">
									<img src="https://s3-ap-northeast-1.amazonaws.com/proactive/${resource.imagePath}" alt="上傳的圖片" id="preview">
								</div>
							</div>
							
						</div><!-- grid_3 -->

						<div class="grid_5">
							<label><strong>類型:</strong></label>
							<ul class="list-screen-condition">
								<li class="screen-condition">
									<a class="cond-down" href="javascript:;">
									<span class="cond-value">${resource.categoryName}</span>
									<i></i>
									</a>
									<ul id="c1">
										<c:forEach items="${category1}" var="category1" varStatus="i">
											<li class="list-item">
												<a href="javascript:;" data-id="${category1.id}" class="${category1.classString}">${category1.name}</a>
											</li>
										</c:forEach>
									</ul>
								</li>
							</ul>

							<label class="label_con2">
								<strong>資源</strong>
								<input type="text" class="txt_con1" name="title" placeholder="資源標題" maxlength="30" value="${resource.title}">
								<input type="text" class="txt_con1" name="url" placeholder="連結" maxlength="100" value="${resource.url}">
								<textarea cols="30" rows="10" name="content" placeholder="簡短描述">${resource.content}</textarea>
							</label>

							<ul class="btnGroup">
								<li><input type="button" id="send" class="btn" value="修改"></li>
								<li><a href="memberResource?id=${loginMember.memberNO}"><input type="button" class="btn btn_chg2" value="取消"></a></li>
							</ul>

						</div><!-- grid_5 -->
					</form>
				</div><!-- container -->
			</div><!-- addPage -->
		</div><!-- content -->

		<!-- 左側meum滑出 -->
		<nav id="menu">
			<ul>		 
				<li class="logo"><a href="index">美編網</a></li>
				<c:forEach items="${menuList}" var="menu">				
				<li class="${menu.classString2}">
					<a class="${menu.classString1}" href="${menu.url}">${menu.icon}${menu.name}</a>
				</li>
				</c:forEach>
 				<li class="menumember">hi, ${loginMember.name}</li>
				<li class="menumember"><a href="aboutme?id=${loginMember.memberNO}"><img src="images/aboutme.png">關於我</a></li>
				<li class="menumember"><a href="memberCourse?id=${loginMember.memberNO}"><img src="images/mycreation.png">我創作</a></li>
                <li class="menumember"><a href="collectCourse?id=${loginMember.memberNO}"><img src="images/mystar.png">我收藏</a></li>
				<li class="menumember"><a href="logout">登出</a></li>
			</ul>
		</nav>
	</div><!-- page -->
	
	<!-- import jquery -->
	<script
		src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>


	<!-- rwdmenu -->
	<script type="text/javascript" src="js/jquery.mmenu.min.all.js"></script>

	<!-- To test using the original jQuery.autocomplete, uncomment the following -->
	<!-- validate -->
    <script src="js/jquery.validate.js"></script>
    <script src="js/messages_zh_TW.js"></script>
    <script src="js/additional-methods.js"></script>
    <!-- preview image -->
    <script src="js/previewimg.js"></script>
	<script type="text/javascript">
		$(function() {
			var oldImage = $("#preview").attr("src");
			$('nav#menu').mmenu();
			$('.list-screen-condition li').hover(function(){
				var $this = $(this);
				$this.find('ul').show();
				$this.find('.cond-down').addClass('cond-down-hover');
				$this.find('.list-item a').click(function(){
					var condVal = $(this).text();
					$this.find('.cond-value').text(condVal);
					$this.find('.list-item a').removeClass('selected');
					$(this).addClass("selected");
					$this.find('ul').hide();
					$this.find('.cond-down').removeClass('cond-down-hover');
				});
			},function(){
				var $this = $(this);
				$this.find('ul').hide();
				$this.find('.cond-down').removeClass('cond-down-hover');
			});
			
			$("#sendForm").validate({
				rules:{
					title:"required",
					url:"required",
					content:{
						required:true,
						maxlength:70
					},
					image:{
						extension:"jpg|png|jpeg|gif",
	    				filesize:1048576
					}
				},
				messages:{
					title:"請填寫標題",
					url:"請填寫連結",
					content:{
						requrired:"請填寫內容",
						maxlength:"不得超過{0}個字"
					},
					image:{
						extension:"檔案格式錯誤，請選擇圖片格式",
	    				filesize:"圖片大小上限為1MB"
					}
				},
				errorPlacement: function (error, element) {
	    	    	if(element.attr('name') == "image"){
	    	            $("#msg1").append(error);
	    	    	}
	    	    	else
	    	    		error.insertBefore(element);
	    	    },
	    	    invalidHandler: function(event, validator) {
	    	    	$("#send").attr("disabled", false);
	    	    },
				ignore: ''
			});
			$("#send").click(function(){
				$("#send").attr("disabled", true);
				$("#status").val(1);
				$("#sendForm").submit();
			});
			
			$("#image").change(function(){
				previewImage(this,$("#preview"),oldImage);
	    	});
			
			$('#c1 .list-item a').click(function(){
				$("#cid1").val($(this).attr("data-id"));
			});
			
		});
	
		
		
	</script>
</body>
</html>